<script>
import { mapGetters, mapMutations, mapState } from 'vuex';
import * as types from '@/store/types';
import panelModules from './modules';
import BaseModule from './base/BaseModule';
import ModuleWrapper from './ModuleWrapper';
import MapViewer from './MapViewer';

/*
 * 数据统计应用模板
 */
export default {
  name: 'DataStatistic',
  components: {
    ModuleWrapper,
    MapViewer,
  },
  mixins: [BaseModule],
  props: {
    //模板选项
    options: {
      type: Object,
      default() {
        return {
          mode: 'view',
          data: [],
          info: {},
          settings: {},
        };
      },
    },
  },
  computed: {
    ...mapState({
      leftPanelState: state => state.statisticApp.leftPanelState,
      bottomPanelState: state => state.statisticApp.bottomPanelState,
    }),
    //左面板样式
    leftPanelClass() {
      return {
        closed: this.leftPanelState == 0,
      };
    },
    //底部面板样式
    bottomPanelClass() {
      return {
        closed: this.bottomPanelState == 0,
        collapsed: this.bottomPanelState == 2,
        filled: this.leftPanelState == 0,
      };
    },
    //Icon样式
    collapseIcon() {
      if (this.bottomPanelState == 1) {
        return 'ios-arrow-down';
      } else if (this.bottomPanelState == 2) {
        return 'ios-arrow-up';
      }
      return '';
    },
    //左面板标题
    leftPanelTitle() {
      return this.activedLeftModule ? this.activedLeftModule.title : '';
    },
  },
  created() {
    this.initPanelModules(panelModules);
  },
  methods: {
    ...mapMutations({
      initPanelModules: types.INIT_PANEL_MODULES,
    }),
    //设置左面板状态
    setCollapseState() {
      let state = this.bottomPanelState == 1 ? 2 : 1;
      this.setBottomPanelState(state);
    },
  },
};
</script>
<template>
  <div class="data-statistic-wrapper">
    <div class="module-menu">
      <ul
        v-for="item in leftModules"
        :key="item.id">
        <li
          :class="{actived:item.actived}"
          @click="toggleLeftModule(item.id)">
          <Icon :type="item.icon" />
          <p>{{ item.title }}</p>
        </li>
      </ul>
    </div>
    <div class="map-wrapper">
      <MapViewer :options="options"></MapViewer>
    </div>
    <div
      :class="leftPanelClass"
      class="module-panel">
      <div class="module-panel-header">
        <span>{{ leftPanelTitle }}</span>
        <Icon
          type="close"
          title="关闭"
          @click.native="setLeftPanelState(0)"/>
      </div>
      <div class="module-panel-content">
        <ModuleWrapper
          v-for="item in leftModules"
          v-show="item.actived"
          :key="item.id"
          :type="item.name"
          :options="item.options">
        </ModuleWrapper>
      </div>
    </div>
    <div
      :class="bottomPanelClass"
      class="result-panel">
      <div class="result-panel-header">
        <ul class="result-tabs-header">
          <li
            v-for="item in bottomModules"
            :key="item.id"
            @click="activeBottomModule(item.id)">
            <a :class="{actived:item.actived}">
              <span>{{ item.title }}</span>
              <Icon
                type="close"
                title="关闭"
                @click.native.stop="removeBottomModule(item.id)"/>
            </a>
          </li>
        </ul>
        <div class="result-panel-actions">
          <div class="result-panel-buttons">
            <Icon
              :type="collapseIcon"
              title="收起/折叠"
              class="weight-font-icon"
              @click.native="setCollapseState"/>
            <Icon
              type="close"
              title="关闭"
              @click.native="setBottomPanelState(0)"/>
          </div>
        </div>
      </div>
      <div class="result-panel-content">
        <ModuleWrapper
          v-for="item in bottomModules"
          v-show="item.actived"
          :key="item.id"
          :type="item.name"
          :options="item.options">
        </ModuleWrapper>
      </div>
    </div>
  </div>
  </div>
</template>
<style lang="less">
.data-statistic-wrapper {
  height: 100%;
  overflow: hidden;
  display: flex;
  position: relative;

  .module-menu {
    width: 80px;
    padding: 10px;
    color: #ffffff;
    background-color: #303030;
    z-index: 2000;
    > ul {
      list-style: none;
      > li {
        height: 54px;
        text-align: center;
        margin-top: 16px;
        cursor: pointer;
        border-radius: 3px;
        &:hover {
          background-color: #5d5d5d;
        }
        &.actived {
          background-color: #3887be !important;
        }
      }
      .k-icon {
        font-size: 18px;
        margin-top: 7px;
        margin-bottom: 3px;
      }
    }
  }

  .map-wrapper {
    flex: 1;
  }

  .module-panel {
    position: absolute;
    left: 80px;
    top: 0;
    bottom: 0;
    width: 280px;
    background-color: #252526;
    transition: all 0.4s ease;
    z-index: 1000;
    &.closed {
      left: -200px;
    }
    .module-panel-header {
      padding: 12px;
      color: #ffffff;
      .k-icon {
        float: right;
        margin-top: 5px;
        cursor: pointer;
      }
    }
    .module-panel-content {
      padding: 12px;
    }
  }

  .result-panel {
    position: absolute;
    left: 360px;
    right: 0;
    bottom: 0;
    height: 230px;
    background-color: #303030;
    transition: all 0.4s ease;
    border-left: 1px solid #414141;
    z-index: 1000;
    &.collapsed {
      bottom: -200px;
    }
    &.closed {
      bottom: -230px;
    }
    &.filled {
      left: 80px;
    }
    .result-panel-header {
      border-bottom: 1px solid #303030;
      color: #ffffff;
      display: flex;
    }
    .result-tabs-header {
      list-style: none;
      margin-left: 0;
      > li {
        padding: 6px;
        float: left;
        cursor: pointer;
        > a {
          padding: 3px 0;
          margin: 0 8px;
          color: #838383;
          font-weight: bold;
          &.actived {
            color: #e7e7e7;
            border-bottom: 1px solid #e7e7e7;
          }
        }
      }
    }
    .result-panel-actions {
      flex: 1;
      padding-left: 5px;
    }
    .result-panel-buttons {
      float: right;
      padding-right: 5px;
      .k-icon {
        padding: 9px 6px;
        cursor: pointer;
      }
      .weight-font-icon {
        font-weight: bold;
      }
    }
    .result-panel-content {
      padding: 2px;
      overflow: auto;
    }
  }
}
</style>
